import {View, Image, StyleSheet, Text} from 'react-native';
import big from '../../assets/big.png'
import small from '../../assets/small.png'
import {useEffect, useRef} from "react";
export default function ImgDemo() {
  const imgRef = useRef(null);
  useEffect(() => {
    const a = "https://pics6.baidu.com/feed/cb8065380cd791236a6285660cc0f18db3b78022.jpeg@f_auto?token=4f7032b68963d112764b15188b2ca153"
    //获取远程图片的属性
    Image.getSize(a, (width,height) => {
      console.log(width+height);
    }, (err) => {
      console.log(err);
    })
    //预加载图片
    Image.prefetch(a).then((data) => {
      console.log(data);//true
    }).catch((err) => {
      console.log(err);
    })
  })
  return (
      <View style={styles.container}>
        <Text>aaa</Text>
        <Image
            ref={imgRef}
            style={styles.img}
            // blurRadius={2}//模糊效果
            source={small}
            // source={{uri:'http//:sss'}}
            // defaultSource={big}//无法加载url的备用图片
          fadeDuration={5000}//延迟加载，ios无效?
            onLoad={(e) => {
              console.log(e.nativeEvent);
            }}
            onError={()=>{
              console.log('error')
            }}
            onLoadStart={() => {
              console.log('load start')
            }}
            onLoadEnd={() => {
              console.log('load end')
            }}
        />
        <Text>bbb</Text>
      </View>
  );
}
const styles = StyleSheet.create({
  container: {
    width: '100%',
    height: '100%',
  },
  img: {
    borderStyle: 'solid',
    borderColor: 'red',
    borderWidth: 1,
    width: 200,
    height: 500,
    resizeMode:"stretch",//铺满变形stretch，按比例缩放contain;cover平铺；重复放repeat
    // tintColor:'red',//让图片变色,log\png
  }
});

